import React from "react";
import {
  Text,
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Flex
} from "@chakra-ui/react";
import SignUp from "./SignUp";
import SignIn from "./SignIn";

export default function Form() {
  return (
    <Box
      bgColor="white"
      p={50}
      pb={30}
      mx="auto"
      mt={50}
      w={400}
      boxShadow="md"
      borderRadius="md">
      <Tabs>
        <TabList color="#969696" mt={0} mb={50} border="none">
        
          <Flex justify="spacearound" mx="auto">
            <Tab fontWeight="400" fontSize={18} _selected={{ color: "#ea6f5a",borderBottom:'2px solid #ea6f5a',fontWeight:"700" }} _focus={{ boxShadow: "none" }}>登录</Tab>
            <Text as="b" color="black.700" p={2.5}>·</Text>
            <Tab fontWeight="400" fontSize={18} _selected={{ color: "#ea6f5a",borderBottom:'2px solid #ea6f5a',fontWeight:"700" }} _focus={{ boxShadow: "none" }}>注册</Tab>
          </Flex>
          
        </TabList>
        <TabPanels>
          <TabPanel m={0} p={0}>
            <SignIn />
          </TabPanel>
          <TabPanel m={0} p={0}>
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
